<!DOCTYPE html>
<html>
    <head>
        <title>EmulatorJS</title>

        <link rel = icon href = docs/favicon.ico sizes = "16x16 32x32 48x48 64x64" type = image/vnd.microsoft.icon>
        <meta name = viewport content = "width = device-width, initial-scale = 1">

        <style>
            body, html {
                height: 100%;
            }

            body {
                font-family: monospace;
                font-weight: bold;
                font-size: 20px;
                margin: 0;
                overflow: hidden;
                background-color: #222
            }

            body, #box {
                display: flex;
                align-items: center;
                justify-content: center;
            }

            #box {
                color: #aaa;
                height: 20em;
                width: 30em;
                max-width: 80%;
                max-height: 80%;
                background-color: #333;
                border-radius: 0.4em;
                border: 2px solid #555;
                position: relative;
                flex-direction: column;
                transition-duration: 0.2s;
                overflow: hidden
            }

            #box:hover, #box[drag] {
                border-color: #38f;
                color: #ddd
            }

            #input {
                cursor: pointer;
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                opacity: 0
            }

            #display {
                width: 100%;
                height: 100%
            }

            select, button {
                padding: 0.6em 0.4em;
                margin: 0.5em;
                width: 15em;
                max-width: 100%;
                font-family: monospace;
                font-weight: bold;
                font-size: 16px;
                background-color: #444;
                color: #aaa;
                border-radius: 0.4em;
                border: 1px solid #555;
                cursor: pointer;
                transition-duration: 0.2s
            }

            select:hover, button:hover {
                background-color: #666;
                color: #ddd
            }
        </style>
    </head>

    <body>
        <div id = box>
            <input type = file id = input>
            Drag ROM file or click here
        </div>

        <script>
            input.onchange = async () => {
                const url = new Blob([input.files[0]])
                const parts = input.files[0].name.split(".")

                const core = await (async (ext) => {
                    if (["fds", "nes", "unif", "unf"].includes(ext))
                        return "nes"

                    if (["smc", "fig", "sfc", "gd3", "gd7", "dx2", "bsx", "swc"].includes(ext))
                        return "snes"

                    if (["z64", "n64"].includes(ext))
                        return "n64"

                    if (["nds", "gba", "gb", "z64", "n64"].includes(ext))
                        return ext

                    return await new Promise(resolve => {
                        const cores = {
                            "Nintendo 64": "n64",
                            "Nintendo Game Boy": "gb",
                            "Nintendo Game Boy Advance": "gba",
                            "Nintendo DS": "nds",
                            "Nintendo Entertainment System": "nes",
                            "Super Nintendo Entertainment System": "snes",
                            "PlayStation": "psx",
                            "Virtual Boy": "vb",
                            "Sega Mega Drive": "segaMD",
                            "Sega Master System": "segaMS",
                            "Sega CD": "segaCD",
                            "Atari Lynx": "lynx",
                            "Sega 32X": "sega32x",
                            "Atari Jaguar": "jaguar",
                            "Sega Game Gear": "segaGG",
                            "Sega Saturn": "segaSaturn",
                            "Atari 7800": "atari7800",
                            "Atari 2600": "atari2600"
                        }

                        const button = document.createElement("button")
                        const select = document.createElement("select")

                        for (const type in cores) {
                            const option = document.createElement("option")

                            option.value = cores[type]
                            option.textContent = type
                            select.appendChild(option)
                        }

                        button.onclick = () => resolve(select[select.selectedIndex].value)
                        button.textContent = "Load game"
                        box.innerHTML = ""

                        box.appendChild(select)
                        box.appendChild(button)
                    })
                })(parts.pop())

                const div = document.createElement("div")
                const sub = document.createElement("div")
                const script = document.createElement("script")

                sub.id = "game"
                div.id = "display"

                box.remove()
                div.appendChild(sub)
                document.body.appendChild(div)

                window.EJS_player = "#game"
                window.EJS_gameName = parts.shift()
                window.EJS_biosUrl = ""
                window.EJS_gameUrl = url
                window.EJS_core = core
                window.EJS_pathtodata = "data/"
                window.EJS_startOnLoaded = true;

                if (window.location.hostname === "demo.emulatorjs.org") {
                    window.EJS_AdUrl = "https://ads.emulatorjs.org/";
                }
                

                script.src = "data/loader.js"
                document.body.appendChild(script)
            }

            box.ondragover = () => box.setAttribute("drag", true)
            box.ondragleave = () => box.removeAttribute("drag")
        </script>
    </body>
</html>
